import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image, Input } from '@tarojs/components'
import { AtGrid,AtDivider } from "taro-ui"
import './index.less'
import downBack from '../../img/downBack.png'
import searchImg from '../../img/searchimg.png'

export default class Index extends Component {

  config = {
    navigationBarTitleText: 'GlobeCat多商户购物系统'
  }

  handleJump(){
    Taro.navigateTo({
      url:'../listDetails/index'
    })
  }
  // componentWillMount () { }

  // componentDidMount () { }

  // componentWillUnmount () { }

  // componentDidShow () { }

  // componentDidHide () { }

  render () {
    const data = {
      banner:'http://iph.href.lu/300x200?text=占位',
      grid:[
          {
            image: 'http://iph.href.lu/300x200?text=占位',
            value: '酒店住宿'
          },
          {
            image: 'http://iph.href.lu/300x200?text=占位',
            value: '美甲美发'
          },
          {
            image: 'http://iph.href.lu/300x200?text=占位',
            value: '美容美体'
          },
          {
            image: 'http://iph.href.lu/300x200?text=占位',
            value: '瑜伽健身'
          },
          {
            image: 'http://iph.href.lu/300x200?text=占位',
            value: '茶馆美食'
          },
          {
            image: 'http://iph.href.lu/300x200?text=占位',
            value: '棋牌台球'
          },
          {
            image: 'http://iph.href.lu/300x200?text=占位',
            value: '酒店KTV'
          },
          {
            image: 'http://iph.href.lu/300x200?text=占位',
            value: '按摩足疗'
          },
          {
            image: 'http://iph.href.lu/300x200?text=占位',
            value: '自营商城'
          },
          {
            image: 'http://iph.href.lu/300x200?text=占位',
            value: '更多内容'
          }
      ],
      fourImg:[
        {
          id:1,
          img:'http://iph.href.lu/300x200?text=占位'
        },{
          id:2,
          img:'http://iph.href.lu/300x200?text=占位'
        },{
          id:3,
          img:'http://iph.href.lu/300x200?text=占位'
        },{
          id:4,
          img:'http://iph.href.lu/300x200?text=占位'
        }
      ],
      guessLike:{
        img:'http://iph.href.lu/300x200?text=占位',
        title:'薄荷小院',
        introduce:'[商之都]双人套餐,提供免费wifi',
        distance:11.6,
        price:79,
        storePrice:99,
        number:99
      }
    }
    return (
      <View className='index'>
        {/*---------第一行地址及搜索框------*/}
        <View className='homeTopFirstLine'>
          {/*----左边位置----- */}
          <View className='leftLocation'>
            <Text>合肥</Text>
            <Image src={downBack} className='downBack' />
          </View>
          {/*-------右边搜索框----- */}
          <View className='rightSearchBox'>
            <Image src={searchImg} className='searchImg' />
            <Input 
              type='text'
              placeholder='请输入商家名、品类或者商圈'
              className='input' 
            />
          </View>
        </View>
        {/*-----------banner图-------- */}
        <View>
          <Image src={data.banner} className='banner' />
        </View>

        <View className='Grid'>
          <AtGrid
            hasBorder={false}
            columnNum={5}
            data={data.grid}
            onClick={this.handleJump}
          />
        </View>
        {/**-------4个广告图------- */}
        <View className='fourImgBox'>
          {data.fourImg.map(item=>(
            <View key={item.id}>
              <Image src={item.img} className='oneImg' />
            </View>
          ))}
        </View>
        {/*-------猜你喜欢------- */}
        <View className='guessLike'>
            {/**------上部文字----- */}
            <View>
              <View className='line' />
              <AtDivider content='猜你喜欢' fontColor='#8d8d8d' lineColor='#bfbfbf' />
              <View className='line' />
            </View>
            {/**------喜欢主体内容----- */}
            <View className='likeBodyBox'>
              {/**左边图片 */}
              <Image src={data.guessLike.img} className='likeImg' />
              {/**右边详情 */}
              <View className='right_details'>
                <Text className='right_details_title'>{data.guessLike.title}</Text>
                <View className='second-line'>
                  <Text className='second_line_introduce'>{data.guessLike.introduce}</Text>
                  <Text className='second-line_distance'>{data.guessLike.distance}km</Text>
                </View>
                <View className='three_line'>
                  <View className='three_line_left'>
                    <Text className='three_line_left_price'>￥{data.guessLike.price}</Text>
                    <Text className='three_line_left_storePrice'>门市价:￥{data.guessLike.storePrice}</Text>
                  </View>
                  <Text className='three_line_number'>已售{data.guessLike.number}</Text>
                </View>
              </View>
            </View>  
        </View>
      </View>
    )
  }
}

